<template>
  <div>
    <nav>
      <ul>
        <li
          :class="current == index ? 'current' : ''"
          v-for="(item, index) in cates"
          :key="index"
          @click="selectCate(index)"
        >
          {{ item.name }}
        </li>
      </ul>
    </nav>
    <cateBookList :categories="categories" ref="bookchild"></cateBookList>
  </div>
</template>

<script>
import { getcateByCondition } from "@/request/api";
import cateBookList from "@/components/cateBookList";
export default {
  components: {
    cateBookList,
  },
  props: {
    url: {
      type: String,
      default: "",
    },
    cates: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      current: 0,
      categories: [],
      cateId: 8,
    };
  },
  methods: {
    selectCate(index) {
      this.current = index;
      this.cateId = this.cates[index].url.split("?")[1].split("=")[1] - 0;
      this.$refs.bookchild.getData(this.cateId);
    },
  },
  mounted() {
    this.cateId = this.url.split("?")[1].split("=")[1] - 0;
    this.$refs.bookchild.getData(this.cateId);
    getcateByCondition(this.url).then((res) => {
      if (res.resCode == 0) {
        let arr = res.categories.filter((v) => v.isTop);
        let arr2 = res.categories.filter((v) => !v.isTop);
        this.categories = [...arr, ...arr2];
      }
    });
  },
};
</script>

<style lang="scss" scoped>
nav {
  position: sticky;
  top: -2px;
  left: 0;
  z-index: 2;
  height: 100px;
  background-color: #eee;
  font-size: 17px;
  padding: 10px 14px 0;
  box-sizing: border-box;
  color: #666;
  ul {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    li {
      height: 40px;
      line-height: 50px;
      margin-right: 10px;
      // font-size: 16px;
      position: relative;
    }
    .current {
      color: #e64d2e;
      &::after {
        position: absolute;
        bottom: 0;
        left: 8px;
        content: "";
        display: block;
        width: 15px;
        height: 3px;
        background-color: #e64d2e;
        border-radius: 3px;
      }
    }
  }
}
</style>
